<template>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <NuxtLink class="navbar-brand" to="/">
        <i class="bi bi-airplane-engines me-2"></i>
        TravelExplorer
      </NuxtLink>
      
      <button 
        class="navbar-toggler" 
        type="button" 
        data-bs-toggle="collapse" 
        data-bs-target="#navbarContent"
        aria-controls="navbarContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse" id="navbarContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <NuxtLink class="nav-link" to="/">首页</NuxtLink>
          </li>
          <li class="nav-item">
            <NuxtLink class="nav-link" to="/destinations">目的地</NuxtLink>
          </li>
          <li class="nav-item">
            <NuxtLink class="nav-link" to="/tours">旅游线路</NuxtLink>
          </li>
          <li class="nav-item">
            <NuxtLink class="nav-link" to="/blog">旅游攻略</NuxtLink>
          </li>
          <li class="nav-item">
            <NuxtLink class="nav-link" to="/about">关于我们</NuxtLink>
          </li>
          <li class="nav-item">
            <NuxtLink class="nav-link" to="/contact">联系我们</NuxtLink>
          </li>
        </ul>
        
        <form class="d-flex me-3">
          <div class="input-group">
            <input 
              class="form-control" 
              type="search" 
              placeholder="搜索目的地..." 
              aria-label="Search"
            >
            <button class="btn btn-outline-light" type="submit">
              <i class="bi bi-search"></i>
            </button>
          </div>
        </form>
        
        <div class="d-flex">
          <button class="btn btn-outline-light me-2" type="button">
            登录
          </button>
          <button class="btn btn-warning" type="button">
            注册
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
</script>

<style scoped>
/* Delete:.navbar {
  background-color: #212529 !important;
} */

.navbar.bg-dark {
  background-color: #212529 !important;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
}

.navbar-brand:hover {
  color: #fff;
}

.nav-link {
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.nav-link:hover {
  color: #ffc107 !important;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-light:hover {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}

.btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
  font-weight: 500;
}

.btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
}

.form-control {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-control:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffc107;
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
  color: white;
}
</style>

